<template>
  <view class="service-reviews">
    <!-- 隐藏标题，因为外部已有标题 -->
    <view class="service-reviews__header" v-if="showViewAll">
      <view class="service-reviews__action" @click="onViewAll">
        <text class="service-reviews__action-text">查看全部</text>
        <text class="service-reviews__action-icon">›</text>
      </view>
    </view>
    <view class="service-reviews__content">
      <block v-if="reviews && reviews.length > 0">
        <view 
          v-for="(review, index) in limitedReviews" 
          :key="index" 
          class="service-review"
        >
          <view class="service-review__header">
            <image :src="review.avatar" class="service-review__avatar" />
            <view class="service-review__info">
              <view class="service-review__top">
                <text class="service-review__name">{{ review.username }}</text>
                <view class="service-review__time">{{ review.time }}</view>
              </view>
              <view class="service-review__rating">
                <text 
                  v-for="n in 5" 
                  :key="n" 
                  class="service-review__star" 
                  :class="{'service-review__star--active': n <= review.rating}"
                >★</text>
              </view>
            </view>
          </view>
          <view class="service-review__content">{{ review.content }}</view>
          
          <!-- 评价图片 -->
          <view class="service-review__images" v-if="review.images && review.images.length > 0">
            <image 
              v-for="(img, imgIndex) in review.images" 
              :key="imgIndex" 
              :src="img" 
              class="service-review__image"
              mode="aspectFill"
              @click="previewImage(review.images, imgIndex)"
            />
          </view>
        </view>
      </block>
      <view v-else class="service-reviews__empty-state">
        <text class="service-reviews__empty-text">暂无评价</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed, defineProps, defineEmits } from 'vue';

const props = defineProps({
  reviews: {
    type: Array,
    default: () => []
  },
  limit: {
    type: Number,
    default: 2
  },
  showViewAll: {
    type: Boolean,
    default: true
  }
});

const emit = defineEmits(['view-all']);

const limitedReviews = computed(() => {
  return props.reviews.slice(0, props.limit);
});

const onViewAll = () => {
  emit('view-all');
};

// 图片预览方法
const previewImage = (images, current) => {
  uni.previewImage({
    urls: images,
    current: current
  });
};
</script>

<style lang="scss" scoped>
.service-reviews {
  padding: 0 15px;
  
  &__header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 12px;
  }
  
  &__action {
    display: flex;
    align-items: center;
    color: #07c160;
    font-size: 14px;
  }
  
  &__action-text {
    margin-right: 3px;
  }
  
  &__action-icon {
    font-size: 16px;
  }
  
  &__empty-state {
    display: flex;
    justify-content: center;
    padding: 20px 0;
  }
  
  &__empty-text {
    font-size: 14px;
    color: #999;
  }
}

.service-review {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.service-review:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.service-review__header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
}

.service-review__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 12px;
  border: 1px solid #f5f5f5;
}

.service-review__info {
  flex: 1;
}

.service-review__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.service-review__name {
  font-size: 15px;
  color: #333;
  font-weight: 600;
}

.service-review__time {
  font-size: 12px;
  color: #999;
}

.service-review__rating {
  display: flex;
}

.service-review__star {
  font-size: 14px;
  color: #ddd;
  margin-right: 2px;
}

.service-review__star--active {
  color: #ffbe2e;
}

.service-review__content {
  padding: 0;
  font-size: 15px;
  color: #333;
  line-height: 1.6;
  margin-bottom: 12px;
}

.service-review__images {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -4px;
}

.service-review__image {
  width: calc(33.33% - 8px);
  height: 80px;
  margin: 4px;
  border-radius: 4px;
  background-color: #f5f5f5;
}
</style>
